<template>
	<div class="mybox">
		<h3 style="margin:20px auto 40px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;个人信息</h3>
		<el-form class="infro" :model="me" label-width="100px" label="入职">
			<el-form-item label="员工编号:">
				<el-input v-model="me.eid" autocoplete="off" disabled></el-input>
			</el-form-item>
			<el-form-item label="密    码:">
				<el-input v-model="me.pwd" autocoplete="off" disabled></el-input>
			</el-form-item>
			<el-form-item label="姓    名:">
				<el-input v-model="me.ename" autocoplete="off" disabled></el-input>
			</el-form-item>
			<el-form-item label="性    别:">
				<el-input v-if="me.sex==0" autocoplete="off" disabled value="男"></el-input>
				<el-input v-if="me.sex==1" autocoplete="off" disabled value="女"></el-input>
			</el-form-item>
			<el-form-item label="部   门:">
				<el-input v-model="me.dname" autocoplete="off" disabled></el-input>
			</el-form-item>
			<el-form-item label="职    位:">
				<el-input v-model="me.job" autocoplete="off" disabled></el-input>
			</el-form-item>
			<el-form-item label="电    话:">
				<el-input v-model="me.tel" autocoplete="off" disabled></el-input>
			</el-form-item>
			<el-form-item label="家庭地址:">
				<el-input v-model="me.adss" autocoplete="off" disabled></el-input>
			</el-form-item>
			<el-form-item label="出生日期:">
				<el-input v-model="me.birth" autocoplete="off" disabled></el-input>
			</el-form-item>
			<el-form-item label="入职日期:">
				<el-input v-model="me.induct_date" autocoplete="off" disabled></el-input>
			</el-form-item>	
			<br/>
			<br/>
			&nbsp;&nbsp;&nbsp;&nbsp;<el-button type="success" @click="changepwd">修改密码</el-button>
		</el-form>
		<el-dialog title="更改密码" :visible.sync="dialogFormVisible" class="invisibox">
			<el-form :model="me" label-width="300px" style="margin:0 auto;">
				<el-form-item label="原密码:">
					<el-input v-model="me.pwd" autocoplete="off" disabled></el-input>
				</el-form-item>
				<el-form-item label="请输入新密码:">
					<el-input v-model="passone" autocoplete="off" @blur="checkpass1"></el-input>
				</el-form-item>
				<el-form-item label="请再次输入新密码:">
					<el-input v-model="passtwo" autocoplete="off" @blur="checkpass2"></el-input>
				</el-form-item>
				<span style="color:#ec3f3f;font-size:12px">{{error}}</span><br/><br/>
				<el-button type="primary" @click="sureChange" :disabled="disable">确认修改</el-button>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				me:this.$parent.$parent.$parent.$parent.emp,
				passone:'',
				passtwo:'',
				error:'',
				disable:true,
				dialogFormVisible:false,
				checkone:false,
			};
		},
		methods:{
			changepwd(){
				this.dialogFormVisible=true;
			},
			sureChange(){
				this.$axios.post("changepwd?id="+this.me.eid+"&pwd="+this.passtwo+"").then(v=>{
					console.log(v)
					if(v.data){
						alert("修改密码成功！！");
						location.href='#/';
					}else{
						alert("出错了！！");
					}
				}).catch(ex=>{
					alert("出错了！"+ex);
				})
				/* this.passone='';
				this.passtwo='';
				this.dialogFormVisible=false; */
			},
			checkpass1(){
				if(this.passone==""){
					this.error="请设置新密码（1）";
					this.disable=true;
					this.checkone=false;
				}else if(this.passone.length<6){
					this.error="密码长度必须大于6位（1）";
					this.disable=true;
					this.checkone=false;
				}else if(this.passone==this.me.pwd){
					this.error="新设置密码必须不和原密码不相同！";
					this.disable=true;
					this.checkone=false;
				}else{
					this.error="";
					this.disable=false;
					this.checkone=true;
				}
			},
			checkpass2(){
				if(this.checkone){
					if(this.passtwo==""){
						this.error="请设置新密码（2）";
						this.disable=true;
					}else if(this.passtwo.length<6){
						this.error="密码长度必须大于6位（2）";
						this.disable=true;
					}else if(this.passone!=this.passtwo){
						this.error="两次输入的新密码不一致";
						this.disable=true;
					}else{
						this.error="";
						this.disable=false;
					}
				}
			}
		}
	}
</script>

<style>
	.mybox{
		width:900px;
		height:600px;
		border:1px solid #FFFFFF;
		background:#FFFFFF;
	}
	.mybox .infro .el-form{
		margin:0 auto;
		width:900px;
	}
	.mybox .el-input{
		width:200px;
		float:left;
	}
	.mybox .infro .el-form-item{
		display:inline-block;
	}
	.infro .el-form-item{
		text-align: center;
	}
	.infro .el-input{
		width:200px;
	}
	.invisibox .el-form-item:nth-child(2) label:before,.invisibox .el-form-item:nth-child(3) label:before{
		width:40px;
		height:20px;
		content:'*';
		color: #F56C6C;
		margin-right:4px;
		
	}
	
</style>
